import React, { PureComponent } from 'react'
import { PageContainer } from '@ant-design/pro-layout';
import { Table, Card, Button, Form, Input, Pagination, Modal, message, Select } from 'antd'
import SubjectCascader from '../Components/SubjectCascader'
import StudentTypeCascader from '../Components/StudentTypeCascader/index'
import { getLearnAnalyze, deleteLearnAnalyze } from '../../services/learn'
import Authorized from '../../components/Authorized/Authorized'
import { baseurl } from '../../services/baseurl'
export default class Learn extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        const name = this.props.location.query.name;
        const stydent_type_data = JSON.parse(localStorage.getItem('userinfo')).student_type;
        const student_type = stydent_type_data ? stydent_type_data.split(',').map(Number) : [];
        this.state = {
            comprehensive: false,
            subject: [],
            student_type: student_type,
            name: name || '',
            names: '',
            id_number: '',
            data: [],
            count: 1,
            selectedRowKeys: [],
            currentPage: '1',
            is_sw: '2'
        }
    }
    renderList = (page: string,is_sw:any) => {
        const { name, id_number, subject, student_type, names } = this.state;
        getLearnAnalyze({ page, name, id_number, subject, student_type, names, is_sw }).then(res => {
            this.setState({
                count: res.count,
                data: res.data
            })
        })
    }
    showComprehensive = (id: any) => () => {
        this.setState({
            comprehensive: true
        })
    }
    hideComprehensive = (id: any) => () => {
        this.setState({
            comprehensive: false
        })
    }
    changeStudentType = (e: any) => {
        if (!e[0]) return;
        this.setState({
            student_type: e
        })
    }
    changeSubject = (e: any) => {
        this.setState({
            subject: e
        })
    }
    changeValue = (e: any, name: string) => {
        this.setState({
            [name]: e.target.value
        })
    }
    componentDidMount() {
        this.renderList('1','2')
    }
    changePage = (e: number) => {
        const { is_sw } = this.state;
        this.renderList(e + '',is_sw)
        this.setState({
            currentPage: e
        })
    }
    searchHandle = () => {
        const { is_sw } = this.state;
        this.renderList('1',is_sw)
        this.setState({
            currentPage: 1
        })
    }
    deleteHandle = () => {
        const { selectedRowKeys ,is_sw} = this.state;
        Modal.confirm({
            title: '提示',
            content: '确定删除选中项？',
            onOk: () => {
                deleteLearnAnalyze({ id: selectedRowKeys }).then(res => {
                    if (res.status === 1) {
                        message.success('已删除')
                        this.setState({
                            selectedRowKeys: []
                        })
                        this.renderList('1',is_sw)
                    } else {
                        message.error('删除失败')
                    }
                })
            }
        })

    }
    exportHandle = () => {
        const { subject, student_type, name, id_number, names } = this.state;
        Modal.confirm({
            title: '提示',
            content: '确定导出用户？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                window.open(`${baseurl}index/index/derive_learn?names=${names}&subject=${subject[subject.length - 1] || ''}&student_type=${student_type[student_type.length - 1] || ''}&name=${name}&id_number=${id_number}`)
            }
        })
    }
    changeIsSw = (e: any) => {
        this.setState({
            is_sw: e,
            currentPage: 1
        })
        this.renderList('1', e);
    }
    render() {
        const { subject, student_type, data, count, name, selectedRowKeys, currentPage } = this.state;
        const columns = [
            {
                title: '姓名',
                dataIndex: 'name'
            },
            {
                title: '准考证号',
                dataIndex: 'id_number'
            },
            {
                title: '课件名称',
                dataIndex: 'names'
            },
            {
                title: '学习时长',
                dataIndex: 'time',
                render: (time: number) => {
                    return (time || 0) + '分钟'
                }
            },
            {
                title: '学习时间',
                dataIndex: 'date',
            },
        ]
        const rowSelection = {
            selectedRowKeys,
            onChange: (selectedRowKeys: any) => {
                this.setState({
                    selectedRowKeys,
                })
            },
        };
        return (
            <PageContainer>
                <Card>
                    <div style={{ overflow: 'hidden', marginBottom: 20 }}>
                        <Form layout="inline" style={{ float: 'right' }}>
                            <Form.Item>
                                <Select onChange={this.changeIsSw} defaultValue="2">
                                    <Select.Option key="2" value="2">特种设备</Select.Option>
                                    <Select.Option key="1" value="1">特种作业</Select.Option>
                                </Select>
                            </Form.Item>
                            <Form.Item> <StudentTypeCascader value={student_type} onChange={this.changeStudentType} /></Form.Item>
                            <Form.Item><SubjectCascader value={subject} onChange={this.changeSubject} /></Form.Item>
                            <Form.Item>
                                <Input placeholder="姓名" value={name} onChange={(e) => this.changeValue(e, 'name')}></Input>
                            </Form.Item>
                            <Form.Item>
                                <Input placeholder="准考证号" onChange={(e) => this.changeValue(e, 'id_number')}></Input>
                            </Form.Item>
                            <Form.Item>
                                <Input placeholder="课件名称" onChange={(e) => this.changeValue(e, 'names')}></Input>
                            </Form.Item>
                            <Form.Item><Button type="primary" onClick={this.searchHandle}>搜索</Button></Form.Item>
                            <Form.Item><Button type="primary" danger onClick={this.exportHandle}>导出</Button></Form.Item>
                        </Form>
                    </div>
                    <Table
                        scroll={{ x: 1400 }}
                        footer={() => <Authorized authority={[603]}><Button onClick={this.deleteHandle} type="primary" danger>删除选中</Button></Authorized>}
                        rowSelection={rowSelection} columns={columns} dataSource={data}
                        pagination={false} rowKey="id"></Table>
                    <Pagination showSizeChanger={false} style={{ float: 'right', marginTop: 20 }} current={currentPage * 1} onChange={this.changePage} total={count} showQuickJumper showTotal={(total, range) => `第${range[0]}条-第${range[1]}条，共 ${total} 条`} />
                </Card>
            </PageContainer>
        )
    }
}
